<template>
	<view class="index">
		<view class="list_item_wrap">
			<view class="list_item" v-for="item in list" :key="item.coachId">
				<img :src="item.avatar" alt="">
				<view class="info">
					<view class="top">
						<view class="name bt"><text>姓名：</text>{{ item.name }}</view>
						<view class="sex bt"><text>性别：</text>{{ item.gender == 0 ? '男' : '女' }}</view>
						<view class="sex bt"><text>年龄：</text>{{ item.age }}岁</view>
						<view class="phone bt"><text>手机号：</text>{{ item.concactNum }}</view>
						<view class="date bt">
							<text>简介：</text>
							<view class="cont">
								{{ item.description }}
							</view>
						</view>
					</view>
					<!-- 添加评分按钮 -->
					<view class="signUp">
						<u-button @click="openRateModal(item.coachId)" class="button">评价</u-button>
						<u-button type="primary" class="button" @click="onLook(item.coachId)">查看评价</u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- uView 模态框 -->
		<u-modal :title="title" showCancelButton :show="showRateModal" @confirm="submitRate" @cancel="closeRateModal">
			<u--textarea v-model="comment" placeholder="请输入评价内容" ></u--textarea>
		</u-modal>
	</view>
</template>

<script>
import { coachList, evaluate } from '../../../common/api'
export default {
	data() {
		return {
			list: [],
			title: '评价',
			showRateModal: false,
			id: null,
			comment: '',
		}
	},
	onLoad() {
		this.getCoachList()
	},
	methods: {
		async getCoachList() {
			let res = await coachList()
			this.list = res
		},
		// 打开评分模态框
		openRateModal(id) {
			this.id = id
			this.showRateModal = true
		},
		// 关闭评论模态框
		closeRateModal() {
			this.showRateModal = false
		},
		// 提交评论
		async submitRate() {
			console.log('评价：', this.comment)
			let params = {
				content: this.comment,
				coachId: this.id,
			}
			let res = await evaluate(params)
			uni.$u.toast('评价成功')
			this.comment = ''
			this.closeRateModal()
		},
		onLook(id) {
			uni.navigateTo({
				url: '/pages/studentAccount/lookReviews/lookReviews?id=' + id
			})	
		}
	}
}
</script>

<style lang="scss" scoped>
.index {
	.list_item_wrap {
		margin: 32rpx;

		.list_item {
			background: #f5f5f5;
			border-radius: 20rpx;
			margin-bottom: 32rpx;

			img {
				width: 100%;
				height: 400rpx;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				display: block;
				object-fit: cover;
			}

			.info {
				padding: 32rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-between;

				.top {
					font-size: $uni-font-size-small;
					font-weight: bold;

					text {
						width: 140rpx;
						font-weight: 400;
						display: block;
						color: $uni-color-type1;
					}

					.bt {
						display: flex;
						margin-bottom: 20rpx;
					}

					.date {
						.cont {
							width: calc(100% - 140rpx);
							display: block;
							font-weight: 400;
						}
					}
				}

				.signUp {
					margin-top: 50rpx;
					display: flex;
					.button {
						width: 45%;
					}
				}
			}
		}
	}
}
</style>
